<template>
  <view>
    <view class="tab-header">
      <view style="margin: 10rpx">
        <uni-datetime-picker v-model="dateRange" type="daterange" @change="onReportDateChange" :clear-icon="false"/>
      </view>
      <view style="margin: 10rpx">
        <uni-data-checkbox v-model="reportType" @change="onReportTypeChange" mode="button" :localdata="reportTypeData"
                           class="flex-center"></uni-data-checkbox>
      </view>
    </view>
    <report-summary v-for="(item, index) in data" :note="noteTitle" :receive="receive" @handleClick="handleClick"
                    :data="item"/>
  </view>
</template>

<script>
import reportSummary from '@/pages/tab2/record/report-summary.vue';
import {getReportList} from '@/api/report/report';
import auth from '@/utils/auth';
import {formatDate, getCurrentMonthRange, getCurrentWeekRange} from '@/api/report/utils/utils';

export default {
  components: {
    reportSummary
  },
  data() {
    return {
      reportTypeData: [
        {
          text: '日报',
          value: 1
        },
        {
          text: '周报',
          value: 2
        },
        {
          text: '月报',
          value: 3
        }
      ],
      noteTitle: {workNote: '今日工作总结', planNote: '明日工作计划', otherNote: '其他事项'},
      receive: 0, //默认我的回报
      reportType: 1, //默认日报
      dateRange: [formatDate(), formatDate()],
      currentTab: 0,
      data: [],
      tabList: ['我的报告', '我收到']
    };
  },
  onLoad(query) {
    if (query.reportType) {
      this.reportType = Number(query.reportType)
    }
    if (query.type == 1) {
      this.receive = 1;
      uni.setNavigationBarTitle({
        title: "我收到的"
      });
    }
    this.getReport();
  },
  methods: {
    handleClick(e) {
      uni.setStorageSync('reportDetail', e);
      uni.navigateTo({
        url: '/pages/tab2/record/report-summary'
      });
    },
    getReport() {
      uni.showLoading({title: '加载中'});
      let requestParam = {
        reportDate: this.dateRange,
        userId: auth.getUser().userId,
        reportType: this.reportType,
        receive: this.receive
      };
      getReportList(requestParam).then((res) => {
        this.data = res.data;
        uni.hideLoading();
      });
    },
    onReportDateChange(e) {
      this.getReport();
    },
    onReportTypeChange(e) {
      this.reportType = e.detail.value;
      switch (e.detail.value) {
        case 1:
          this.noteTitle = {workNote: '今日工作总结', planNote: '明日工作计划', otherNote: '其他事项'};
          this.dateRange = [formatDate(), formatDate()];
          break;
        case 2:
          this.noteTitle = {workNote: '本周工作总结', planNote: '下周工作总结', otherNote: '其他事项'};
          this.dateRange = getCurrentWeekRange().split('至');
          break;
        case 3:
          this.noteTitle = {workNote: '本月工作总结', planNote: '下月工作总结', otherNote: '其他事项'};
          this.dateRange = getCurrentMonthRange().split('至');
          break;
      }
      this.getReport();
    },
    switchTab(e) {
      if (e.currentIndex == 1) {
        this.receive = 1;
      } else {
        this.receive = 0;
      }
      this.currentTab = e.currentIndex;
      this.getReport();
    },
    submit() {
      this.isFocus = true;
    }
  }
};
</script>

<style>
.tab-header {
  display: flex;
  flex-direction: column;
  background: #fff;
  margin: 0 20rpx;
  padding: 20rpx;
  border-radius: 10rpx;
}

.flex-center {
  display: flex;
  justify-content: center;
}
</style>
